<template>
  <div>
    <nav-top title="我的招募"
             :goback="true"></nav-top>
    <div class="all">
      <section class="content">
        <div class="qrCode">
          <img :src="qrcode"
               alt="">
        </div>
        <div class="invitationCode ">
          <span> 我的邀请码：{{ invite_code }}</span>
        </div>
        <div class="btn">
          <button class='shareImg' @click="shareImage">分享图片</button>
          <button class='shareLink' @click="shareLink"> 分享链接</button>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";
import Axios from 'axios';
import { domain } from '../../api';
import { wxshare } from './../../wxconf'

export default {
  components: {
    NavTop
  },
  data () {
    return {
      invite_code: '',
      invite_link: '',
      userlist:[],
      user:{},
      qrcode:''
    }
  },
  methods:{
    shareLink(){
      const callback = () => {
        this.$dialog.alert({ message: "点击右上角进行分享给TA" })
      }
      wxshare(this.user.name+"邀请您加入利佳会员", "点击加入", this.user.head_img, this.invite_link, callback)
    },
    shareImage(){
      this.$dialog.alert({ message: "长按二维码，即可发送给你的好友，邀请TA加入会员" })
    }
  },
  created(){
    // 获取邀请码
    Axios.get(domain+ '/api/user/info')
    .then((res)=>{
      if(res.data.code == 1 ){
        this.user = res.data.data.user
        Axios.get(domain + '/api/invite/code')
        .then((res)=>{
          if(res.data.code == 1 ){
            this.invite_code = res.data.data
            this.invite_link = domain+'/auth/register?invite_code='+res.data.data
            this.qrcode = "http://www.likehealth.com.cn/qr/?url=http:"+this.invite_link
            wxshare(this.user.name+"邀请您加入利佳会员", "点击加入", this.user.head_img, this.invite_link)
          }else{
            this.$dialog.alert({ title: res.data.msg, message: res.data.err })
          }
        })
        .catch((err)=>{
          this.$dialog.alert({ title: '提示', message: err })
        })
      }else{
        this.$dialog.alert({ title: res.data.msg, message: res.data.err })
      }
    })
    .catch((err)=>{
      this.$dialog.alert({ title: '提示', message: err })
    })

  }
}
</script>
<style lang="scss" scoped>
.all {
  width: 320px;
  background-image: url("/static/img/myRecruitment/cover.png");
  background-size: cover;
  .content {
    padding: 119px 42px;
    width: 235px;
    height: 485px;
    background: url("/static/img/myRecruitment/phone.png") no-repeat;
    background-size: 235px 485px;
    background-position:42px 119px ;
    .qrCode {
      padding: 92px 36px 0;
      width: 164px;
      height: 164px;
      img {
        width: 164px;
        height: 164px;
      }
    }
    .invitationCode {
      margin: 39px auto 0;
      text-align: center;
      span {
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
    .btn {
      margin: 57px auto;
      button {
        width: 72px;
        height: 19px;
        background: rgba(255, 255, 255, 1);
        border: NaNpx solid rgba(255, 255, 255, 1);
        border-radius: 9px 9px 9px 9px;
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(36, 190, 216, 1);
      }
      .shareImg {
        margin-left: 25px;
      }
      .shareLink {
        margin-left: 41px;
      }
    }
  }
}
</style>